<template>
  <div class="login">
    <div class="login-weaper">
      <div class="login-left">
        <!-- 时间显示 -->
        <div class="login-time">
          <span>{{ time.txt }}</span>
        </div>
        <div class="login-left-box">
          <div>
            <el-tooltip
              class="item"
              effect="dark"
              content="online 0630"
              placement="top"
            >
              <div class="logo">欢迎</div>
            </el-tooltip>
            <h2 class="title">come back</h2>
            <div class="msg"></div>
          </div>
        </div>
      </div>
      <div class="login-right">
        <div class="login-main" v-if="loginType == 3">
          <h4 class="login-title">部装排序工作台 {{ version }}</h4>
          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="loginRules"
            class="el-form login-form"
          >
            <el-form-item style="margin-left: 0px" prop="userName">
              <el-input
                type="text"
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
                v-model="loginForm.userName"
                clearable
                autocomplete="off"
                @keyup.enter="onKeyUp"
              >
              </el-input>
            </el-form-item>
            <el-form-item style="margin-left: 0px" prop="password">
              <el-input
                type="text"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                v-model="loginForm.password"
                autocomplete="off"
                :show-password="true"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 100%"
                v-model="loginForm.WHAreaId"
                placeholder="请选择工作台"
                clearable
              >
                <el-option
                  v-for="item in stationsList"
                  :key="item.value"
                  :label="item.WbName"
                  :value="item.WbId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin: 40px 0px 0">
              <el-button
                type="primary"
                class="login-submit"
                @click="submitForm"
                @keyup.enter="onKeyUp(e)"
              >
                <span>登录</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <el-dialog
      title="选择产线 | 投料点"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <sel-work-bench @getWorKBenchValue="getWorKBenchValue"></sel-work-bench>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="proSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { formatDate, formatAxis } from "@/utils/formatTime";
import { api } from "@/utils/api";
import Base64 from "@/utils/Base64.js";
import SelWorkBench from "@/components/SelWorkBench.vue";
import { comparedArr } from "@/utils/tools";

export default {
  name: "login",
  components: {
    SelWorkBench,
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 3) {
        // callback(new Error(this.$t("login.passWordRuleMsg")));
      } else {
        callback();
      }
    };
    return {
      isView: false,
      dialogVisible: false,
      productionLine: "",
      loginForm: {
        userName: "LQQ",
        password: "8888",
      },
      stationsList: [],
      loginRules: {
        userName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
      },
      telLoginForm: {
        phone: "",
        password: "",
      },
      telLoginRules: {
        phone: [
          {
            required: true,
            // message: this.$t("login.phoneRuleMsg1"),
            trigger: "blur",
          },
          {
            pattern:
              /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            // message: this.$t("login.phoneRuleMsg2"),
            trigger: "blur",
          },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
      },
      loginType: 3,
      route: "/",
      time: {
        txt: "",
        fun: null,
      },
      version: "V1.1.2",
      PublicKey:
        "-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCmEXJf0ehzAPBlpsptktB3ao86OGeTyAA4Qz1mscfUU1ZYU165mjcZwImyzsNM40KDT3/h8Cltht++Qr9zKpZG2bMN7Vk1vzn4xBrZteFdL6mOcsXjIulEd8veTnl/0Hh+pGfJelijJWWanskVDN7nv2ud9WpwEn+exHh45JOy/QIDAQAB-----END PUBLIC KEY-----",
    };
  },
  computed: {
    // 获取当前时间
    currentTime() {
      return formatAxis(new Date());
    },
  },
  mounted() {
    this.initTime();
    this.getStationsPoints();
    window.addEventListener("keydown", this.onKeyUp);
  },
  methods: {
    // 工作台获取
    async getStationsPoints() {
      let [ERR, GRES] = await api.getStationsPointsAPI();
      if (GRES.code === 0) {
        console.log("工作台获取", GRES);
        localStorage.setItem("StationstList", JSON.stringify(GRES.data));
        this.stationsList = GRES.data;
      }
    },
    // 初始化左上角时间显示
    initTime() {
      // this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
      this.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS");
      this.time.fun = setInterval(() => {
        this.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS");
      }, 1000);
    },
    onKeyUp(e) {
      if (e.keyCode === 13) {
        this.submitForm();
      }
    },
    proSure() {
      this.dialogVisible = false;
    },
    getWorKBenchValue(data) {
      this.productionLine = data;
    },
    selProductionLine() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    async submitForm() {
      if (this.loginForm.WHAreaId) {
        const params = {
          data: {
            UserId: this.loginForm.userName,
            WHAreaId: this.loginForm.WHAreaId,
            Password: Base64.encode(this.loginForm.password),
          },
        };
        let [ERR, LRES] = await api.loginAPI(params);
        if (LRES.code === 0) {
          sessionStorage.setItem("userName", this.loginForm.userName);
          localStorage.setItem("WbId", this.loginForm.WHAreaId);
          Message.success("操作成功");
          this.$router.push("/home");
        }
      } else {
        this.$message({
          message: "请选择工作台",
          type: "warning",
        });
      }
    },
  },
  destroyed() {
    clearInterval(this.time.fun);
    window.removeEventListener("keydown", this.onKeyUp, false);
  },
};
</script>

<style scoped lang="scss">

.login {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  position: relative;
  background: url(../assets/image/bg-login.png) no-repeat;
  // background: url(../../assets/image/agvbg.jpg) no-repeat;
  background-size: 100% 100%;
  .login-weaper {
    margin: auto;
    height: 500px;
    display: flex;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    .login-left {
      width: 491px;
      padding: 20px;
      font-size: 16px;
      color: #fff;
      position: relative;
      background-color: rgba(64, 158, 255, 0.8);
      display: flex;
      flex-direction: column;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      .login-time {
        width: 100%;
        color: #fff;
        opacity: 0.9;
        font-size: 14px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .lang_span {
          .iconfont {
            color: #fff;
            font-size: 30px !important;
          }
        }
      }
      .login-left-box {
        flex: 1;
        overflow: hidden;
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        padding: 80px 45px;
        .logo {
          font-size: 22px;
          margin-bottom: 15px;
        }
        .title {
          color: #fff;
          font-weight: 300;
          letter-spacing: 2px;
          font-size: 16px;
        }
        .msg {
          color: #fff;
          font-size: 14px;
          margin-top: 35px;
          .login_type_radio.el-radio-group {
            display: flex;
            flex-direction: column;
            .el-radio {
              color: #fff !important;
              margin-top: 10px;
              ::v-deep .el-radio__label {
                font-size: 16px;
              }
            }
            .el-radio.is-checked {
              ::v-deep .el-radio__label {
                color: #7fff00 !important;
              }
              ::v-deep .el-radio__input.is-checked .el-radio__inner {
                border-color: #7fff00 !important;
                background: #7fff00 !important;
              }
            }
          }
          .msg-author {
            opacity: 0.6;
            span:last-of-type {
              margin-left: 15px;
            }
          }
          .msg-txt {
            margin-top: 15px;
            line-height: 22px;
          }
        }
      }
    }
    .login-right {
      width: 491px;
      padding: 20px;
      position: relative;
      align-items: center;
      display: flex;
      background-color: rgba(255, 255, 255, 1);
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      .login-main {
        margin: 0 auto;
        width: 70%;
        .login-title {
          color: #333;
          margin-bottom: 40px;
          font-weight: 500;
          font-size: 22px;
          text-align: center;
          letter-spacing: 4px;
        }
        .login-form {
          margin: 10px 0;
          i {
            color: #333;
          }
          .el-form-item {
            margin-bottom: 20px !important;
            .login-code {
              display: flex;
              align-items: center;
              justify-content: space-around;
              margin: 0 0 0 10px;
              user-select: none;
              .login-code-img {
                margin-top: 2px;
                width: 100px;
                height: 38px;
                border: 1px solid #dcdfe6;
                color: #333;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 5px;
                line-height: 38px;
                text-indent: 5px;
                text-align: center;
                cursor: pointer;
                transition: all ease 0.2s;
                border-radius: 4px;
                &:hover {
                  border-color: #c0c4cc;
                  transition: all ease 0.2s;
                }
              }
            }
            .login-submit {
              width: 100%;
              height: 45px;
              letter-spacing: 2px;
              font-weight: 300;
            }
          }
        }
        .login-menu {
          margin-top: 30px;
          width: 100%;
          text-align: left;
          a {
            color: #999;
            font-size: 12px;
            margin: 0 8px;
            text-decoration: none;
            &:hover {
              color: #1e9fff;
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
}
</style>
